<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">申请代理</block>
		</cu-custom>
		<view class="padding">
			<view class="padding-sm bg-white margin-bottom-sm examine-tips radius-xl" v-if="form.examine === 0">
				正在审核中，请耐心等待
			</view>
			<view class="padding-sm bg-white margin-bottom-sm message-tips radius-xl text-error"
				v-if="form.message && form.examine === 3">
				{{ form.message }}
			</view>
			<view class="padding-sm bg-white radius-xl form">
				<view class="item padding-sm crow">
					<view class="name">姓名</view>
					<input type="text" placeholder="请输入姓名" class="text-right" v-model="form.name" :disabled="formDisabled">
				</view>
				<view class="item padding-sm crow">
					<view class="name">手机号码</view>
					<input type="tel" placeholder="请输入手机号码" class="text-right" v-model="form.mobile" maxlength="11"
						:disabled="formDisabled">
				</view>
				<view class="item padding-sm crow">
					<view class="name">意向代理城市</view>
					<view @tap="!formDisabled && $refs.xRegionsRef.show({
						level: 2
					})">
						<template v-if="form.province_id">{{ form.province }} {{ form.city }} {{form.area}}</template>
						<template v-else>
							<text class="text-gray">请选择代理城市</text>
						</template>
						<text class="cuIcon-right"></text>
					</view>
				</view>
				<view class="item padding-sm crow">
					<view class="name">意向代理等级</view>
					<view>
						<template v-if="form.area_id">区域代理</template>
						<template v-else-if="form.city_id">市级代理</template>
						<template v-else-if="form.province_id">省级代理</template>
						<template v-else>总代理</template>
					</view>
				</view>
			</view>

			<view class="padding margin-top-lg">
				<view class="flex flex-direction">
					<template v-if="form.examine == 0">
						<button class="cu-btn china-btn-bg lg round" disabled>审核中</button>
					</template>
					<template v-if="form.examine === null || form.examine == 3">
						<button class="cu-btn china-btn-bg lg round" @click="submit()">提交</button>
					</template>
					<template v-if="form.examine == 1">
						<text class="text-center">审核成功！</text>
					</template>
				</view>
			</view>

			<view class="tips padding text-sm padding-top-0">
				<view class="padding-bottom-xs text-gray">
					<text>{{WEBCONFIG.agent_apply_tips}}</text>
				</view>
			</view>
		</view>

		<!-- 选择意向城市 -->
		<x-regions ref="xRegionsRef" checkStrictly @selected="selectedRegions" />
	</view>
</template>

<script>
import { mapState } from 'vuex'
let map;
export default {
	data() {
		return {
			form: {
				province_id: "",
				province: '',
				city_id: "",
				city: '',
				area_id: "",
				area: '',
				mobile: "",
				name: "",
				examine: null,
				message: "",
				latitude: "",
				longitude: "",
			},
		};
	},
	computed: {
		formDisabled() {
			return this.form.examine === 1 || this.form.examine === 0;
		},
		...mapState({
			WEBCONFIG: state => state.WEBCONFIG
		})
	},
	onLoad(options) {
		map = this.$utils.useMap(() => {
			this.getLocation();
		});
		this.getInfo();
	},
	methods: {
		getLocation() {
            if(!map.isReady()){return;}
			map.getCurrentPosition().then((result) => {
				this.form.latitude = result.position.lat
				this.form.longitude = result.position.lng
			}).catch(() => {
			});
		},
		getInfo() {
			if (!this.$store.getters.hasLogin) return;
			this.$utils.$api.Agent.info().then(data => {
				this.form = data;
				this.getLocation();
			}).catch(err => { })
		},
		submit() {
			map.getCurrentPosition().then((result) => {
				this.form.latitude = result.position.lat
				this.form.longitude = result.position.lng
			}).catch(() => {
			});
			this.$utils.$api.Agent.apply(this.form).then(res => {
				this.$utils.$message.success(res.msg);
				this.getInfo();
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		},
		selectedRegions(value) {
			this.form.province_id = value.province_id;
			this.form.province = value.province;
			this.form.city_id = value.city_id;
			this.form.city = value.city;
			this.form.area_id = value.area_id;
			this.form.area = value.area;
		},
	}
}
</script>

<style lang="scss" scoped>
.form {
	.item {
		justify-content: space-between;
		margin-bottom: 30upx;
	}

	.item.item-center {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.border {
		border: 1px solid #999999;
	}
}


.text-sm {
	font-size: 24upx;
}

.message-tips {
	font-size: 24upx;
	color: $u-error;
	border: 1px solid $u-error;
}

.examine-tips {
	font-size: 24upx;
	color: $u-info;
	border: 1px solid $u-info;
}
</style>
